import { FC, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.scss';
import useGetPageInfo from '../../../hooks/useGetPageInfo';
import useLoadQuestionData from '../../../hooks/useLoadQuestionData';
import { Spin, Result, Button } from 'antd';
import { useTitle } from 'ahooks';
import StatHeader from './components/StatHeader';
import LeftPanel from './components/LeftPanel';
import PageStat from './components/PageStat';
import RightPanel from './components/RightPanel';
const Stat: FC = () => {
  const { loading } = useLoadQuestionData();
  const { title, isPublished } = useGetPageInfo();
  useTitle(`统计问卷 - ${title}`);
  const [selectedComponentId, setSelectedComponentId] = useState('');
  const [selectedComponentType, setSelectedComponentType] = useState('');
  const nav = useNavigate();
  const LoadingElement = (
    <div style={{ textAlign: 'center', marginTop: '60px' }}>
      <Spin />
    </div>
  );

  function genContentElement() {
    console.log('genContentElement', 'isPublished', isPublished);
    if (typeof isPublished === 'boolean' && !isPublished) {
      return (
        <div style={{ flex: 1 }}>
          <Result
            status="warning"
            title="当前问卷尚未发布"
            extra={
              <Button
                type="primary"
                onClick={() => {
                  nav(-1);
                }}
              >
                返回首页
              </Button>
            }
          />
        </div>
      );
    }

    return (
      <>
        <div className={styles.left}>
          <LeftPanel
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
          />
        </div>
        <div className={styles.main}>
          <PageStat
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
          />
        </div>
        <div className={styles.right}>
          <RightPanel
            selectedComponentId={selectedComponentId}
            selectedComponentType={selectedComponentType}
          />
        </div>
      </>
    );
  }

  return (
    <div className={styles.container}>
      <StatHeader />
      <div className={styles['content-wrapper']}>
        {loading && LoadingElement}
        {!loading && <div className={styles['content']}> {genContentElement()} </div>}
      </div>
    </div>
  );
};
export default Stat;
